<template>
  <el-card class="web-tool-editor">
    <div slot="header" class="clearfix">
      <span>编辑器</span>
    </div>
    <div class="content-btns">
      <el-button size="mini" type="primary" @click="show(0, markdownIsShwo)">自定义Markdown</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="show(1, simplemdeMarkdownIsShow)"
      >Simplemde Markdown</el-button>
    </div>
    <div v-show="markdownIsShwo" class="markdown-editer-box">
      <w-markdown :savebtn="false"/>
    </div>
    <div v-show="simplemdeMarkdownIsShow" class="markdown-editer-box">
      <w-simplemde-markdown/>
    </div>
  </el-card>
</template>

<script lang="ts">
import WMarkdown from "@/components/pc/marked/editor.vue";
import WSimplemdeMarkdown from "@/components/global/simplemdeMarkdown/index.vue";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    WMarkdown,
    WSimplemdeMarkdown
  }
})
export default class WebToolCodingBase64 extends Vue {
  // 是否显示markdown编辑器
  markdownIsShwo = false;
  // Simplemde Markdown是否显示
  simplemdeMarkdownIsShow = false;

  // 显示指定的markdown
  show(type: number, state: boolean) {
    this.hidAll();
    switch (type) {
      case 0:
        this.markdownIsShwo = !state;
        break;
      case 1:
        this.simplemdeMarkdownIsShow = !state;
        break;
    }
  }
  // 是隐藏所有
  hidAll() {
    this.markdownIsShwo = false;
    this.simplemdeMarkdownIsShow = false;
  }
}
</script>

<style lang="scss" scoped>
.web-tool-editor {
  .markdown-editer-box {
    padding-top: 20px;
  }
}
</style>
